<template> 
   <div class="a">课程列表</div><el-divider /><el-divider /> 
            
   <el-table :data="tableData" style="width: 100%">
    
  <el-table-column prop="id" label="序号" width="180" float="left" />
    <el-table-column prop="name" label="课程名称" width="250" />
    <el-table-column prop="date" label="创建时间" width="200" />
      <el-table-column prop="stateUp" label="可见状态" width="190">
       <template #default="{ row }">
     <el-switch
       v-model="row.enable"
       active-color="#1890FF"
       inactive-color="#A9A8A8"
      @click="open1" 
      type="success" 
     /></template> </el-table-column>

       <el-table-column prop="make" label="操作" width="90" >
   <el-button > <router-link :to="'/kc/qiantaokecheng/'">
   <el-icon ><EditPen /></el-icon></router-link> </el-button></el-table-column>

    <el-table-column prop="make" label="" width="90" >
   <el-button > <router-link :to="'/kc/qiantaokecheng/'">
  <el-icon ><Files /></el-icon></router-link> </el-button></el-table-column>

      <el-table-column prop="make" label="" width="90" >
   <el-button > <router-link :to="'/kc/qiantaokecheng/'">
<el-icon ><Monitor /></el-icon></router-link> </el-button></el-table-column>

    <el-table-column prop="make" label="" width="90" >
   <el-button > <router-link :to="'/kc/qiantaokecheng/'">
   <el-icon ><School /></el-icon></router-link> </el-button>
       </el-table-column> 
                
  </el-table>
  <div class="haha">
      <router-view></router-view>
          </div>
</template>

<script>
import {EditPen, Files,Monitor, School,} from '@element-plus/icons-vue'
export default({
  data(){
    return{
      tableData : [
  {id:1,name: "Java程序设计",date: '2020-12-12',},
  {id:2,name: "MySOL数据库技术",  date: '2021-12-11',
  },
  {id:3,name: "Web前端开发基础",date: '2021-12-11',
  },
  {id:4,name: "web前端开发基础", date: '2021-12-11',
  }
],
  }
    } ,
  components:{
      EditPen,
      Files,
      Monitor,
      School,
  
  },
  methods:{
    open1(){
      this.$message({
          message:'Java程序设计现在是可见的',
          
          type:'success'
})
}
  }
})
</script>


<style >

</style>